<div class="inner-app">
    <div class="inner-app__context-bar context-bar">
        <span class="h4 context-bar__icon" style="margin-left: 15px;">
            {{#link-to "dashboard.portalManagement.role"}}<i class="ioicon ioicon-left"></i> 角色管理&nbsp;    {{/link-to}} / {{#if roleForm.name}} {{roleForm.name}}{{else}}新建角色{{/if}}
        </span>
    </div>
    <div class="row">
        <div class="panel-heading bg-primary">
            {{#link-to "dashboard.portalManagement.role"}} 角色管理&nbsp;    {{/link-to}} / {{#if roleForm.name}} {{roleForm.name}}{{else}}新建角色{{/if}}
        </div>
    </div>
    <div class="inner-app__main collapsed">
        <div class="row" style="padding: 20px;">
            <div class="io-steps io-steps-horizontal io-steps-label-horizontal" style="display: inline-block; text-align: center; padding-left: 100px;">
                {{#each roleAllTabs as |step|}}
                <div class="io-steps-item io-steps-status-{{step.status}}" style="margin-right: -18.4492px; width: 246px; text-align: left; cursor: pointer;" {{action "selectTabAction" step}}>
                    {{#unless step.last}}
                    <div class="io-steps-tail"> <i> </i> </div>
                    {{/unless}}
                    <div class="io-steps-step">
                        <div class="io-steps-head">
                            <div class="io-steps-head-inner">
                                {{#if (eq step.status "finish")}}
                                <span class="io-steps-icon ioicon ioicon-check">
                                </span>
                                {{else}}
                                <i class='idcicon idcicon-{{step.icon}}'></i>
                                {{/if}}
                            </div>
                        </div>
                        <div class="io-steps-main">
                            <div class="io-steps-title">
                                {{step.title}}
                            </div>
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>
        </div>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane {{if (eq '角色信息' currentTab) 'active'}}" id="info">
                {{#io-form submitForm="saveRoleAction" class="panel form-horizontal"}}
                <div class="panel-body row"style="width:800px; margin:auto;">
                    {{#io-form-group labelColClass="col-md-8" inputColClass="col-md-16" required=true help="" label="角色编码：" }}
                    {{io-input value=roleForm.code type="text" required=true data-error="请填写角色编码" }}
                    {{/io-form-group}}
                    
                    {{#io-form-group labelColClass="col-md-8" inputColClass="col-md-16" required=true help="" label="角色名称：" }}
                    {{io-input value=roleForm.name type="text" required=true data-error="请填写角色名称" }}
                    {{/io-form-group}}
                    {{#io-form-group labelColClass="col-md-8" inputColClass="col-md-16" help="" label="描述信息：" }}
                    {{io-textarea style="font-size:10px" value=roleForm.remark rows="6"}}
                    {{/io-form-group}}
                    <div class="row "style="text-align:center">
                        <button  type="submit"  class="io-btn io-btn-primary"> {{io-icon type="save"}}保存</button>
                    </div>
                </div>
                {{/io-form}}
            </div>
            <div role="tabpanel" class="tab-pane {{if (eq '用户组信息' currentTab) 'active'}}" id="role">
                <div class="container-fluid">
                    <div class="row padding0" style="padding: 30px; width: 770px; margin: auto;">
                        <div style="margin-bottom:8px">
                                <label for="">用户组类型：</label>
                        {{!-- {{#io-form-group labelColClass="col-sm-8" inputColClass="col-sm-16" required=false help="" label="用户组类型：" }} --}}
                            {{#io-select value=model.groupType placeholder="默认" }}
                                {{#each model.groupTypeTree as |queryType|}}
                                    {{#io-option value=queryType.code}}{{queryType.value}}{{/io-option}}
                                {{/each}}
                            {{/io-select}}
                            </div>
                        {{!-- {{/io-form-group}} --}}

                        {{io-transfer
                        dataSource=model.dataSource
                        targetValues=model.selectedGroupList}}
                    </div>
                    <div class="row"style="text-align:center">
                        <button  {{action "saveGroupRoleAction" }}  class="io-btn io-btn-primary"> {{io-icon type="save"}}保存</button>
                    </div>
                </div>
                
            </div>
            <div role="tabpanel" class="tab-pane {{if (eq '权限资源信息' currentTab) 'active'}}"  id="role">
                <div class="inner-app_main"  style="padding: 20px;">
                    <div class="row" style="max-width: 800px; margin: auto;">
                        <div class="row inline-search">
                            <div style="display:inline-block;">
                                <label for="">系统名称：</label>
                                {{#io-select value=model.appId  required=true placeholder="请选择" width=150 }}
                                {{#each model.appIdList as |idc|}}
                                {{#io-option value=idc}}{{idc}}{{/io-option}}
                                {{/each}}
                                {{/io-select}}
                            </div>
                            <div  style="display:inline-block;margin-left:20px;">
                                <label for="">权限资源类型：</label>
                                {{#io-select value=model.resType  required=true placeholder="请选择"  width=200}}
                                {{#each model.resTypeData as |idc|}}
                                {{#io-option value=idc.code}}{{idc.name}}{{/io-option}}
                                {{/each}}
                                {{/io-select}}
                            </div>
                        </div>
                        
                        {{#if loading}}
                        {{io-loading}}
                        {{else}}
                        {{#if model.resTree}}
                        <br>
                        <div class="selectbox" >
                            <div class="selectbox__menu col-sm-8" style="height: 450px;">
                                {{io-tree
                                model=model.resTree
                                in-multi-selection=true
                                multi-selection=model.selRes
                                selected=selected}}
                            </div>
                            <div class="selectbox__content col-sm-16" style="height: 450px;">
                                <div class="row">
                                    <h3>已选择权限 -- {{model.selPersLength}}个：</h3>
                                    <p>
                                        {{#each model.selPers as | per|}}
                                        <span class="io-tag">
                                            {{#if per.title}}
                                            <span class="io-tag-text">{{per.title}}</span>
                                            {{else}}
                                            <span class="io-tag-text">{{per.authResName}}</span>
                                            {{/if}}
                                            <i {{action "removePermission" per}} class="ioicon ioicon-cross"></i>
                                        </span>
                                        {{/each}}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row selectbox__content__footer" style="text-align: center;">
                            {{#io-button type="primary" onClick="savePermissionAction"}} {{io-icon type="save"}}保存 {{/io-button}}
                            
                        </div>
                        {{else}}
                        <p class="empty">
                            没有任何数据，请选择过滤条件
                        </p>
                        {{/if}}
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>